<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 下拉框
            父级标签: select
            子级标签: option    子下拉框选项
                      optgroup  子下拉框分组

        注意:
        * select    赋予name属性
        * option    赋予value属性
        * optgroup  赋予label属性
        


        HTML: 只负责展示内容 (文字, 图片, 音频, 视频等信息)
        CSS: 只负责美化HTML
        JS:  负责页面特效+数据处理        
     -->

     <select name="province">
         <option value="1">河南</option>
         <option value="2">山西</option>
         <option value="3">上海</option>
         <option value="4">浙江</option>
     </select>

     <select name="city">
         <option value="1-1">郑州</option>
         <option value="1-2">开封</option>
         <option value="1-3">洛阳</option>
         <option value="1-4">商丘</option>
     </select>

     <hr>

     <select name="">
         <optgroup label="河南">
            <option value="1-1">郑州</option>
            <option value="1-2">开封</option>
            <option value="1-3">洛阳</option>
            <option value="1-4">商丘</option>
         </optgroup>

         <optgroup label="江苏">
             <option value="1-1">南京</option>
             <option value="1-2">常州</option>
             <option value="1-3">无锡</option>
             <option value="1-4">苏州</option>
         </optgroup>
     </select>
</body>
</html>